<template>
	<view class="contract-container">
		<view class="contract-list  u-p-35 u-flex u-col-center u-m-b-20" v-for="(item,index) in dataList" :key="index" style="background-color: #FFFFFF;">
			<view class="contract-lt contract-child">
				<view class="contract-logo u-p-8 ">
					<image :src="item.sellerLogoUrl?item.sellerLogoUrl:defaultLogo" mode="" class="logo-image " ></image>
					<view class="contract-mark ">销售</view>
				</view>
				<view class="u-line-1 u-font-24 " style="font-weight: bold;width: 190rpx;text-align: center;">{{item.sellerName}}</view>
			</view>
			<view class="u-flex u-m-l-24 u-m-r-24" style="flex-direction: column;align-items: center;">
				<view class=" u-font-24 u-p-t-4 u-p-b-4 u-p-l-18 u-p-r-18" style="background-color: #EEEEEE;color: #666;border-radius: 20rpx;">交易额</view>
				<view class=" u-line-1 u-font-32 u-m-t-20" style="font-weight: bold;color: #999999;width: 210rpx;text-align: center;">￥{{item.totalAmountOfTrade}}</view>
				<image src="/static/owners/shuangjiantou.png" mode="" class="" style="width: 222rpx;height: 34rpx;"></image>
				<view class=" u-line-1 u-font-32 u-m-b-20" style="font-weight: bold;color: #999999;width: 210rpx;text-align: center;">{{item.totalQuantityOfTrade}}单</view>
				<view class=" u-font-24 u-p-t-4 u-p-b-4 u-p-l-18 u-p-r-18" style="background-color: #EEEEEE;color: #666;border-radius: 20rpx;">订单量</view>
			</view>
			<view class="contract-rt contract-child">
				<view class="contract-logo u-p-8 ">
					<image :src="item.buyerLogoUrl?item.buyerLogoUrl:defaultLogo" mode="" class="logo-image "></image>
					<view class="contract-mark ">采购</view>
				</view>
				<view class="u-line-1 u-font-24 " style="font-weight: bold;width: 190rpx;text-align: center;">{{item.buyerName}}</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data(){
			return {
				loading:true,
				dataList:[]
			}
		},
		async created() {
			await this.getDataInit();
		},
		methods:{
			async getDataInit(){
				let params = {
				}
				const res = await this.$newHttp.get('api/BrandOwnerSalesman/GetContractualRelationshipSummaryBySalesman', { params: params });
				if(res.code == 200){
					this.dataList = res.data;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contract-container{
		.contract-list{
			.contract-child{
				display: flex;
				flex-direction: column;
				align-items: center;
				flex: 1;
				.contract-logo{
					width: 140rpx;
					height: 140rpx;
					border-radius: 50%;
					box-sizing: border-box;
					border: 4rpx solid #FF551A;
					position: relative;
					margin-bottom: 20rpx;
					.logo-image{
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
					.contract-mark{
						position: absolute;
						box-sizing: border-box;
						padding: 6rpx 10rpx;
						background-color: #FF551A;
						color: #fff;
						border: 2rpx solid #fff;
						border-radius: 18rpx;
						font-size: 20rpx;
						right: -20rpx;
						bottom: 0rpx;
					}
				}
			}
			.contract-rt{
				.contract-logo{
					border: 4rpx solid #FFBB1A;
					.contract-mark{
						background-color: #FFBB1A;
					}
				}
			}
		}
	}
</style>
